<template>
  <div class="add">
    <el-form ref="form" :rules="rules" :model="form" label-width="8rem">
      <el-row>
        <el-col :span="12">
          <el-form-item label="商品名" prop="productName">
            <el-input v-model="form.productName" placeholder="请输入商品名" style="width: 100%"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商品类型" prop="categoryId">
            <el-select v-model="form.categoryId" placeholder="请选择" style="width: 100%">
              <el-option
                v-for="item in options"
                :key="item.categoryId"
                :label="item.categoryName"
                :value="item.categoryId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="商品标题" prop="productTitle">
            <el-input v-model="form.productTitle" placeholder="请输入商品标题"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="商品介绍" prop="productIntro">
            <el-input v-model="form.productIntro" type="textarea" placeholder="请输入商品介绍"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="商品原价" prop="productPrice">
            <el-input v-model="form.productPrice" type="number" placeholder="请输入商品原价"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商品现价" prop="productSellingPrice">
            <el-input v-model="form.productSellingPrice" type="number" placeholder="请输入商品现价"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="商品总数" prop="productNum">
            <el-input v-model="form.productNum" type="number" placeholder="请输入商品总数"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="商品封面" prop="productNum">
            <el-upload
              class="upload-demo"
              ref="upload"
              accept=".jpg,.png,.jpeg"
              :on-change="handleChange"
              :action="uploadUrl"
              :limit="1"
              :show-file-list="true"
              :auto-upload="false"
            >
              <el-button type="primary" slot="trigger">选取文件</el-button>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="商品图片">
            <el-upload
              class="upload-demo"
              ref="upload"
              accept=".jpg,.png,.jpeg"
              :on-change="handleOtherChange"
              :action="otherUploadUrl"
              :show-file-list="true"
              :auto-upload="false"
              :on-remove="handleRemove"
              :on-preview="handlePreview"
            >
              <el-button type="primary" slot="trigger">选取文件</el-button>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="primary" @click="addData()">创建</el-button>
        <el-button @click="$router.back()">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import $ from "@/api/project";

export default {
  data() {
    return {
      form: {
        productName: "",
        categoryId: undefined,
        categoryName: "",
        productTitle: "",
        productIntro: "",
        productPicture: "",
        productPrice: undefined,
        productSellingPrice: undefined,
        productNum: undefined,
        productSales: undefined,
      },
      rules: {
        productName: {
          required: true,
          message: "请填写",
        },
        categoryId: {
          required: true,
          message: "请选择",
        },
        categoryName: {
          required: true,
          message: "请填写",
        },
        productTitle: {
          required: true,
          message: "请填写",
        },
        productIntro: {
          required: true,
          message: "请填写",
        },
        productPrice: {
          required: true,
          message: "请填写",
        },
        productSellingPrice: {
          required: true,
          message: "请填写",
        },
        productNum: {
          required: true,
          message: "请填写",
        },
      },
      options: [],
      uploadUrl: '',
      uploadfile: "",
      otherUploadUrl: "",
      otherUploadFile: [],
      listLoading: false,
      // 封面path
      coverPath: "",
      // 商品照片地址
      picturePath: [],
    };
  },
  created() {
    this.getCategoryList()
  },
  methods: {
    //处理上传后删除文件
    handleRemove(file) {
      this.picturePath.forEach((res, index) => {
        if (res === file.name){
          this.picturePath.splice(index, 1)
        }
      })
    },
    handlePreview(file) {
      let path=file.name
      let a="http://localhost:8090/product/imgInfo?path="+path
      window.open(a)
    },


    handleChange(file) {
      this.uploadfile = file
      this.handleSubmit()
    },
    handleSubmit() {
      if (this.uploadfile == "") {
        this.$message({
          message: "请先选择图片",
          type: 'error'
        })
        return
      }
      this.listLoading = true;
      let formData = new FormData()
      formData.append('file', this.uploadfile.raw);
      $.pictureUpload(formData).then(res => {
        if (res.success) {
          this.coverPath = res.data
          this.$message({
            message: "上传成功",
            type: 'success'
          })
        }
      })
    },
    handleOtherChange(file) {
      this.otherUploadFile = file
      this.handleOtherSubmit()
    },
    handleOtherSubmit() {
      if (this.otherUploadFile == "") {
        this.$message({
          message: "请先选择图片",
          type: 'error'
        })
        return
      }
      this.listLoading = true;
      let formData = new FormData()
      formData.append('file', this.otherUploadFile.raw);
      $.pictureUpload(formData).then(res => {
        if (res.success) {
          this.picturePath.push(res.data)
          this.$message({
            message: "上传成功",
            type: 'success'
          })
        }
      })
    },
    async getCategoryList() {
      await $.findAllCategory().then(res => {
        this.options = res.data
      })
    },
    addData() {
      if (!this.validate()) return;
      this.form.productPicture=this.coverPath
      $.insertProduct(this.form).then(res => {
        if (res.data){
          this.picturePath.push(res.data.toString())
          $.updateProductPicture(this.picturePath).then(()=>{
            this.$router.back()
          })
        }
      });
    },
    validate() {
      let error = "";
      if (this.form.productName == null) {
        error = "请填写商品名\n";
      } else if (this.form.categoryId == null) {
        error = "请选择类型\n";
      }

      if (error) {
        this.$message({
          message: error,
          type: "error"
        });
        return false;
      }
      return true;
    }
  }
};
</script>
<style scoped>
.add {
  padding: 1rem;
}
</style>
